<template>
  <div>
    <shead />
    <div class=" top-menu">
      <div class="container">
        <div class="row">
          <div class="col-2">
            <img class="logo" src="~/assets/logo.png" alt="" />
          </div>
          <div class="col-6">
            <div class="search">
              <input type="text"><button>搜索</button>
              <div class="keywords">
                <a href="">手机五折抢</a>
                <a href="">手机五折抢</a>
                <a href="">手机五折抢</a>
                <a href="">手机五折抢</a>
                <a href="">手机五折抢</a>
              </div>
              <div class="menus">
                <a href="">秒杀</a>
                <a href="">优惠券</a>
                <a href="">PLUS会员</a>
                <a href="">品牌闪购</a>
              </div>
            </div>
          </div>
          <div class="col-2 cart">
            <div class="cart-box">
              我的购物车
            </div>
          </div>
          <div class="col-2">
            <img src="https://img12.360buyimg.com/babel/jfs/t1/110367/24/7516/28420/5e5dcdbeEebe51346/95f8286acb183fb0.png.webp" alt="">
          </div>
        </div>
      </div>
    </div>
    <nuxt />
  </div>
</template>

<script>
import shead from '~/components/head/shead'
export default {
  components: {
    shead
  }
}
</script>

<style lang="scss">
  body {
    background-color: #f2f2f2;
  }
  .top-menu {
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    padding: 5px 0 0 0;
    .logo {
      width: 150px;
    }
    .search {
      text-align: center;
      padding-top: 30px;
      input {
        padding: 10px;
        border: 2px solid red;
        width: 80%;
      }
      button {
        padding: 11px 20px;
        background-color: red;
        color: #fff;
        border: 0;
      }
    }
    .keywords {
      text-align: left;
      padding-left: 15px;
    }
    .keywords a {
      font-size: 12px;
      color: #ccc;
    }
    .cart {
      padding-top: 30px;
      .cart-box {
        border: 1px solid #ddd;
        padding: 10px;
        font-size: 12px;
        width: 60%;
        color: red;
      }
    }
    .menus {
      text-align: left;
      padding-top: 25px;
    }
  }
</style>
